<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>
        <template #right>
          <el-button
            v-allow="'import' "
            type="warning"
            size="small"
            @click="$router.push('/upload-excel')"
          >excel导入</el-button>
          <el-button
            v-allow="'export_excel' "
            type="danger"
            size="small"
            @click="handleDownload"
          >excel导出</el-button>
          <el-button
            v-allow=" 'add' "
            type="primary"
            size="small"
            @click="showDialog=true"
          >新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <!-- 渲染数据 -->
        <el-table :data="list" border :default-sort="{prop: 'timeOfEntry', order: 'ascending'}">
          <el-table-column label="序号" type="index" />
          <!-- 渲染员工头像 -->
          <el-table-column label="" width="125">
            <template #default="{row}">
              <el-image
                style="width: 100px; height: 100px;border-radius: 50%;"
                :src="row.staffPhoto"
              />
            </template>

          </el-table-column>

          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" sortable prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{row}"> {{ hireTypeFormat(row.formOfEmployment) }} </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" sortable prop="timeOfEntry" />
          <!-- <el-table-column label="账户状态" /> -->
          <el-table-column label="操作" width="280">
            <template #default="{row}">
              <!-- 子路由 跳转的时候要把父级路由一起带上 -->
              <!-- <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/?id=${row.id}`)"
              >查看</el-button>    这个是利用路由传递  查询参数 -->
              <!-- 这个是  路由的路径参数传参 -->
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
                @click="userId(row.id)"
              >分配角色</el-button>
              <el-button type="text" size="small" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="page"
            :page-sizes="[2, 4, 6, 8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- dialog 新增弹层 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      title="新增员工"
      :visible.sync="showDialog"
      @close="Hclose"
    >
      <!-- 显示数据的组件 -->
      <empDialog ref="reset" @success="Hsuccess" @show="showDialog=false" />
    </el-dialog>
    <!-- 给员工分配角色的弹层 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      title="分配角色"
      :visible.sync="roleShowDialog"
    >
      <assignRole v-if="roleShowDialog" :id="id" @close="roleShowDialog = false" />
    </el-dialog>

  </div>
</template>
<script>
import { getUserAll, delEmployee } from '@/api/employees.js'
import employeesEnum from '@/constant/employees.js'
import assignRole from './assignRole'
import empDialog from './empDialog'
// [{id:1,value:'正式'},{id:2,value:'非正式'}]  =====>{1:'正式',2:'非正式'}
/* const newObj = {}
employeesEnum.hireType.forEach(item => {
  newObj[item.id] = item.value
}) */
//  数组reduce()  方法
//  [].reduce(('累计和','数组的元素','索引号')={},  '默认值')
const newObj = employeesEnum.hireType.reduce((sum, item) => {
  sum[item.id] = item.value
  return sum
}, {})
// console.log('newObj', newObj)
export default {
  components: {
    empDialog, assignRole
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //
      id: '', // 用来保存当前被点击分配角色的当前id
      list: [], // 保存获取的员工列表
      page: 1, // 页码值
      size: 2, // 每页显示几条数据
      total: 0, // 总数据
      showDialog: false, // 弹层显示隐藏
      roleShowDialog: false // 控制分配角色弹层
    }
  },
  created() {
    this.loadUserAll()
  },
  methods: {
    // 接收当前被点击分配角色的当前id
    userId(id) {
      this.id = id
      this.roleShowDialog = true
    },
    // 控制每页条数的切换
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page = 1
      this.size = val
      this.loadUserAll()
    },
    // 控制页码值的切换
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.loadUserAll()
    },
    // 获取员工简单列表
    async loadUserAll() {
      try {
        const res = await getUserAll(this.page, this.size)
        if (res.code !== 10000) return
        this.list = res.data.rows
        this.total = res.data.total
        // console.log(res)
      } catch (error) {
        console.log('获取员工简单列表error', error)
      }
    },
    // 枚举格式
    // 需求返回的是 正式或非正式
    hireTypeFormat(data) {
      // data===>   1  ||  2
      // 利用find()找到id === data对应的对象取出来  再拿这个对象的value值  最后再把value值返回
      // return employeesEnum.hireType.find(item => item.id === data).value
      //  好方法
      return newObj[data] || '未知'
    },
    // 监听子组件事件
    Hsuccess() {
      // 获取最大页码值
      this.total++
      this.page = Math.ceil(this.total / this.size)
      // 从新渲染数据
      this.loadUserAll()
      // 关闭弹层
      this.showDialog = false
    },
    // 点击了删除
    del(id) {
      this.$confirm('你点击了删除是否继续?', '提示').then(async() => {
        try {
          const res = await delEmployee(id)
          // console.log('delEmployee', res)
          if (res.code !== 10000) return
          this.$message.success(res.message)
          if (this.list.length === 1) {
            this.page--
            if (this.page < 0) {
              this.page = 1
            }
          }
          this.loadUserAll()
        } catch (err) {
          console.log('delEmployee删除', err)
        }
      }).catch(err => console.log(err))
    },
    // 在dialog弹层关闭时候执行的回调函数 重置表单数据
    Hclose() {
      this.$refs.reset.reset()
    },
    // 导出excel 格式转换数据
    dataFormt(list) {
      // Object.values(item)  ["2018-11-20"]
      // 1. 根据数据对象的健根据映射关系，得到一个中文的健，放到一个数组中  ---header ['编号', '密码']
      // 2. 将每一个对象的值，存到一个数组中，所有的结果放入到一个大的数组中--data  [["2018-11-30", "总裁办"],[]]
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      // headers = ['转正日期', '部门', '聘用形式', '编号', '手机号', '密码', '头像地址', '入职日期', '姓名', '工号']
      // 1. 获取表头
      const one = list[0] // 获取的是对象
      let headers = []
      if (one) {
        const enkeys = Object.keys(one) // 放入所有英文的键(属性)  返回一个数组
        // console.log('  Object.keys(one)是', Object.keys(one))
        headers = enkeys.map(enky => {
          // console.log('enky是', enky)  //获取每一个英文
          return map[enky]
          // console.log(' map[enky]是', map[enky])  //取到 map 里面的 每个属性的值
        })
        // console.log('headers是?', headers)  //获得表头['转正日期', '部门', '聘用形式', '编号', '手机号', '密码', '头像地址', '入职日期', '姓名', '工号']
      }
      // 2. 将每一个对象 对象中的值存到一个数组中,将每个数组存储到大数组中
      const data = list.map(item => {
        // console.log(item)  得到两个对象
        return Object.values(item) // 取出所有的属性的values(也就是属性的值) 放入一个数组

        // 获得 ['2018-11-20', '市场部', 1, '604f764971f93f3ac8f365c3', '13800000003', 'e10adc3949ba59abbe56e057f20f883e', 'http://q6cu3t6jv.bkt.clouddn.com/1063705989926227968?t=1616204161907', '2018-11-04', '孙财', '111']
        // console.log(' Object.values(item)是?', Object.values(item))
      })
      // console.log('此时headers', headers, '此时data', data)
      return { headers, data }
    },
    // 点击excle 导出的时候 触发的函数
    async handleDownload() {
      // 1. 发送请求获取数据
      try {
        const res = await getUserAll(this.page, this.size)
        if (res.code !== 10000) return
        // console.log(res.data.rows)
        // 调用函数 传递参数
        const { headers, data } = this.dataFormt(res.data.rows)
        // import('@/vendor/Export2Excel') 懒加载的方式读取一个文件 (模块) 返回的是一个promise 实例对象
        import('@/vendor/Export2Excel').then(excel => {
        // excel指的是模块对象(文件对象)，就可以直接调用文件中的任何函数或者使用文件中的任何变量  excel.函数名()   || excel.变量
          // console.log(excel, 'excel')
          //  excel调用export_json_to_excel()
          excel.export_json_to_excel({
            // 把转换的 数据 进行提取
            header: headers,
            data,
            filename: this.filename,
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
        })
        // console.log(res)
      } catch (error) {
        console.log('获取员工简单列表error', error)
      }
      // 2. 需要讲获取到的数据转换为 excel 需要的格式  tHeader , data
      // 3. 调用 export_json_to_excel()  将格式化好的数据写入到 excel 文件中

      //  import('@/vendor/Export2Excel')  懒加载的方式读取一个文件（模块）返回是一个promise实例对象
    }
  }
}
</script>
